<template>
    <div :class="$style.innerPage">
        <div :class="$style.banner">
            <div :class="$style.left">
                <img :class="$style.icon" src="@/assets/banner-icon.png" />
                <div :class="$style.text"><template v-if="authStore.userInfo.name">{{authStore.userInfo.name}}，</template>欢迎登录</div>
            </div>
            <div :class="$style.right">
                <div>{{ dateStr }}</div>
                <div class="m-t-5">{{ weekStr }}</div>
            </div>
        </div>
        <div>
            <div :class="$style.cards">
                <a-card :class="$style.card">
                    <div :class="$style.top">
                        <div :class="$style.left">
                            <div :class="$style.name">服务总数</div>
                            <div>
                                <span :class="$style.num">{{ formatVisitNumber(topData.appCount) }}</span>
                            </div>
                        </div>
                        <div>
                            <img :class="$style.icon" src="@/assets/1.png" />
                        </div>
                    </div>
                    <div :class="$style.bottom">
                        <div style="flex: 1;"></div>
                        <a-select :class="$style.option" v-model:value="topQuery.appCount" :options="categories" @change="getappCount"></a-select>
                    </div>
                </a-card>
                <a-card :class="$style.card">
                    <div :class="$style.top">
                        <div :class="$style.left">
                            <div :class="$style.name">服务访问人数</div>
                            <div>
                                <span :class="$style.num">{{ formatVisitNumber(topData.uniqueVisitors) }}</span>
                                <span :class="$style.unit">人</span>
                            </div>
                        </div>
                        <div>
                            <img :class="$style.icon" src="@/assets/2.png" />
                        </div>
                    </div>
                    <div :class="$style.bottom">
                        <div style="flex: 1;"></div>
                        <a-select :class="$style.option" v-model:value="topQuery.uniqueVisitors" :options="categories" @change="getuniqueVisitors"></a-select>
                    </div>
                </a-card>
                <a-card :class="$style.card">
                    <div :class="$style.top">
                        <div :class="$style.left">
                            <div :class="$style.name">服务访问次数</div>
                            <div>
                                <span :class="$style.num">{{ formatVisitNumber(topData.visitTimes) }}</span>
                                <span :class="$style.unit">次</span>
                            </div>
                        </div>
                        <div>
                            <img :class="$style.icon" src="@/assets/3.png" />
                        </div>
                    </div>
                    <div :class="$style.bottom">
                        <div style="flex: 1;"></div>
                        <a-select :class="$style.option" v-model:value="topQuery.visitTimes" :options="categories" @change="getvisitTimes"></a-select>
                    </div>
                </a-card>
            </div>
        </div>
        <div :class="$style.chartCards">
            <div :class="$style.card">
                <div :class="$style.header">
                    <div :class="$style.left">
                        <div :class="$style.iconTon"><PieChartOutlined /></div>
                        <div :class="$style.name">服务类型分布</div>
                    </div>
                </div>
                <div :class="$style.main">
                    <div :class="$style.body">
                        <div :class="$style.pieTon">
                            <div :class="$style.chartbox">
                                <div :class="$style.wrap">
                                    <div v-if="loadingPie" style="padding: 30px;">
                                        <a-spin size="large" />
                                    </div>
                                    <v-chart v-else :class="$style.pieChart" :option="pipeOption" />
                                </div>
                            </div>
                            <div :class="$style.categoryItems">
                                <div :class="$style.item" v-for="(item, index) in categoryAppCountList" :key="index">
                                    <div :class="$style.icon" :style="{background : pieColor[index]}">{{ formatVisitNumber(item.count) }}</div>
                                    <div :class="$style.text">{{ item.name }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div :class="$style.card">
                <div :class="$style.header">
                    <div :class="$style.left">
                        <div :class="$style.iconTon"><BarChartOutlined /></div>
                        <div :class="$style.name">访问次数排行榜</div>
                    </div>
                    <div>
                        <a-radio-group v-model:value="barParams" size="small" @change="getBarData">
                            <a-radio-button value="month">本月</a-radio-button>
                            <a-radio-button value="year">本年</a-radio-button>
                        </a-radio-group>
                    </div>
                </div>

                <div :class="$style.main">
                    <div :class="$style.body">
                        <div v-if="loadingBar" style="padding: 30px;">
                            <a-spin size="large" />
                        </div>
                        <v-chart v-else :class="$style.barChart" :option="barOption" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { use } from "echarts/core";
    import { CanvasRenderer } from "echarts/renderers";
    import { PieChart, BarChart } from "echarts/charts";
    import {
        TitleComponent,
        TooltipComponent,
        GridComponent
    } from "echarts/components";
    import VChart from "vue-echarts";
    import { ref, provide } from "vue";
import { appCountApi, categoryApi, categoryAppCountApi, rankVisitTimesByMonthApi, rankVisitTimesByYearApi, uniqueVisitorsApi, visitTimesApi } from "@/api/Statistics";
import { PieChartOutlined, BarChartOutlined } from "@ant-design/icons-vue";
import { useAuthStore } from "@/store";
import { formatVisitNumber } from '@/utils'

const authStore = useAuthStore()

    const weeks = ['日', '一', '二', '三', '四', '五', '六']
    const date = new Date()
    const dateStr = (String(date.getMonth() + 1).padStart(2, '0')) + '/' + (String(date.getDate()).padStart(2, '0'))
    const weekStr = '星期' + weeks[date.getDay()]

    use([
        CanvasRenderer,
        PieChart,
        TitleComponent,
        TooltipComponent,
        BarChart,
        GridComponent
    ]);

    const loadingPie = ref(false)
    const loadingBar = ref(false)

    const pieColor = ['#0052D9', '#699EF5', '#D9E1FF']
    const categoryAppCountList = ref<any[]>([])

    const pipeOption = ref({
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        grid: {
            left : 0,
            top : 0,
            bottom :0,
            right : 0
        },

        color : pieColor,
        
        series: [
            {
                name: "服务类型分布",
                type: "pie",
                radius: "80%",
                center: ["50%", "50%"],

                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },


                data: []
            }
        ]
    });

    const barParams = ref('month')

    const barOption = ref({
        tooltip: {
            trigger: "item"
        },

        grid: {
            left : 0,
            //top : 30,
            bottom :0,
            //right : 0,
            containLabel : true
        },

        xAxis: {
            type: 'value',
            axisLine : {
                show : false
            },
            axisTick : {
                show : false
            },
            splitLine : {
                show : false
            },
        },
        yAxis: {
            type: 'category',
            axisLine : {
                show : false
            },
            axisTick : {
                show : false
            },
            splitLine : {
                show : false
            },
            data: []
        },
        
        series: [
            {
                name: "访问次数排行榜",
                type: "bar",
                barWidth : 30,
                label: {
                    show: true,
                    position: 'right',
                    valueAnimation: true,
                    formatter : (e) => formatVisitNumber(e.value)
                },
                data: []
            }
        ]
    });

    loadingPie.value = true
    categoryAppCountApi().then(r => {
        const series:any[] = []
        categoryAppCountList.value = r.data
        r.data.forEach(item => {
            series.push({
                name : item.name,
                value : item.count
            })
        })

        pipeOption.value.series[0].data = series

        loadingPie.value = false
    })

    async function getBarData() {
        loadingBar.value = true
        let r;
        let date = new Date()
        if(barParams.value == 'month') {
            r = await rankVisitTimesByMonthApi(date.getFullYear() + '' + (date.getMonth() + 1))
        }else {
            r = await rankVisitTimesByYearApi(date.getFullYear())
        }

        if(r.data) {
            r.data.sort(function(a, b){
                return a.visitTimes - b.visitTimes
            })
            const appNames:string[] = []
            const counts:any[] = []
            r.data.forEach((item, index) => {
                let name = item.name as string
                if(name.length > 6) {
                    name = name.substring(0, 4) + '...'
                }
                appNames.push(name)
                counts.push({
                    name : item.name,
                    value : item.visitTimes, //#0052D9 #0052D9
                    itemStyle : {
                        color : index > 1 ? '#0052D9' : '#B5C7FF'
                    }
                })
            })

            barOption.value.yAxis.data = appNames
            barOption.value.series[0].data = counts

        }

        loadingBar.value = false
    }


    const topQuery = ref({
        appCount : 0,
        uniqueVisitors : 0,
        visitTimes : 0
    })

    const topData = ref({
        appCount : 0,
        uniqueVisitors : 0,
        visitTimes : 0
    })

    const categories = ref([{label : '全部', value : 0}])


    function getappCount() {
        appCountApi(topQuery.value.appCount).then(r => {
            topData.value.appCount = r.data
        })
    }

    function getuniqueVisitors() {
        uniqueVisitorsApi(topQuery.value.uniqueVisitors).then(r => {
            topData.value.uniqueVisitors = r.data
        })
    }

    function getvisitTimes() {
        visitTimesApi(topQuery.value.visitTimes).then(r => {
            topData.value.visitTimes = r.data
        })
    }

    

    categoryApi().then(r => {
        categories.value.push(...r.data.map(item => {
            return {label : item.name, value : item.id}
        }))
    })

    getappCount()
    getuniqueVisitors()
    getvisitTimes()

    getBarData()
</script>

<style lang="scss" module src="./index.scss"></style>